<template>
  <div v-loading="loading" class="user_management">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-row>
        <el-col :span="8" :gutter="8">
          <el-form-item label="用户名">
            <el-input
                v-model="searchForm.userName"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="8">
          <el-form-item label="邮箱">
            <el-input
                v-model="searchForm.email"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :gutter="8">
          <el-form-item label="号码">
            <el-input
                v-model="searchForm.phoneNo"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16" :gutter="16">
          <el-form-item label="创建时间">
            <el-date-picker v-model="searchForm.createTimeStart" type="datetime" placeholder="请选择日期" ></el-date-picker>
            -
            <el-date-picker v-model="searchForm.createTimeEnd" type="datetime" placeholder="请选择日期" ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="btn_group">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="tool_bar">
      <span></span>
      <span class="add_btn">
        <el-button type="primary" @click="onOpenAddUserDialog"
        >增加用户</el-button
        >
      </span>
    </div>
    <div class="result">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phoneNo" label="号码" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column prop="operator" label="操作" width="400">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="onEdit(scope.row, 'edit')"
            >
              修改
            </el-button>
            <el-button size="small" type="primary" @click="onDelete(scope.row.exactId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, ->, prev, pager, next, jumper, sizes"
          :total="pager.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {selectUserPage, createUser, updateUser,deleteUser} from "@/network/api";

const searchForm = reactive({
  userName: "",
  email: "",
  phoneNo: "",
  createTimeStart: "",
  createTimeEnd: "",
});

const pager = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

const loading = ref(false);

const tableData = ref([]);
const onReset = () => {
  searchForm.userName = "";
  searchForm.email = "";
  searchForm.phoneNo = "";
  searchForm.createTimeStart = "";
  searchForm.createTimeEnd = "";
  onSearch();
};
const onSearch = () => {
  pager.currentPage = 1;
  requestData();
};

const handleSizeChange = (size) => {
  pager.pageSize = size;
  pager.currentPage = 1;
  requestData();
};
const handleCurrentChange = (cur) => {
  pager.currentPage = cur;
  requestData();
};
const requestData = () => {
  loading.value = true;
  const createTimeStart = searchForm.createTimeStart.toLocaleString().replaceAll("/","-");
  const createTimeEnd = searchForm.createTimeEnd.toLocaleString().replaceAll("/","-");
  selectUserPage({
    userName: searchForm.userName,
    email: searchForm.email,
    phoneNo: searchForm.phoneNo,
    createTimeStart: createTimeStart,
    createTimeEnd: createTimeEnd,
    size: pager.pageSize,
    current:pager.currentPage,
  })
      .then((res) => {
        if (res?.data) {
          pager.total = res.data.total;
          tableData.value = res.data.records || [];
        } else {
          pager.total = 0;
          tableData.value = [];
        }
      })
      .finally(() => {
        loading.value = false;
      });
};

const onOpenAddUserDialog = () => {
  // 注意这是测试代码，方便新增的
  createUser({
    userName: "user" + new Date().getTime(),
    email: "email" + new Date().getTime(),
    phoneNo: "phoneNo" + new Date().getTime(),
    password: "password123",
  }).then((res) => {
    onSearch();
  });
};
const onEdit = (row) => {
  updateUser({
    userId:row.id,
    userName:userName,
  }).then((res) => {

  });
};
const onDelete = (id) => {

  deleteUser({
    userId: id,
  }).then((res) => {
    if (res?.code === 200) {
      // 删除成功
      ElMessage({
        message: "delete success",
        type: "success",
      });
      onSearch();
    } else {
      // 删除失败
      ElMessage({
        message: "delete failed",
        type: "error",
      });
    }
  });
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.user_management {
  .btn_group {
    text-align: center;
  }
  .tool_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .result {
    margin-top: 12px;
  }
  :deep(.el-pagination) {
    width: 100%;
    margin: 10px 0 12px;
  }
}
</style>
